<template>

  <el-container>
    <el-header class="auto"><goback content="备忘录"></goback></el-header>
    <el-main>
      <el-tabs type="border-card" v-model="tab" @tab-click="handleClick">
        <el-tab-pane>
          <span slot="label" name="0">备忘录</span>
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="标题">
              <el-input v-model="form.title" placeholder="标题"></el-input>
            </el-form-item>

            <el-form-item label="类型">
              <el-select v-model="form.region" placeholder="类型">
                <el-option label="立项" value="1"></el-option>
                <el-option label="预算" value="2"></el-option>
                <el-option label="结算" value="3"></el-option>
                <el-option label="财务" value="4"></el-option>
                <el-option label="行政" value="5"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

<!--          table表格-->
          <el-table
            :data="tableData"
          >
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="type" label="类型"></el-table-column>
            <el-table-column prop="title" label="标题"></el-table-column>
            <el-table-column prop="ctime" label="创建时间"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" @click="editNote(scope.row)">编辑</el-button>
                <el-button type="danger" @click="delNote(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="form.page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="form.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-main>
<!--    弹窗-->
    <el-dialog :title="note.title" :visible.sync="dialogFormVisible">
      <el-form :model="note">
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="note.title" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input v-model="note.note" autocomplete="off" type="textarea"></el-input>
        </el-form-item>

        <el-form-item label="附件" :label-width="formLabelWidth">
          <el-row>
            <el-col :span="20">
              <uploadFile :params="fileParam" @test="changeFileList"></uploadFile>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="upNote">确 定</el-button>
      </div>
    </el-dialog>



  </el-container>
</template>

<script >

import goback from "../common/goback.vue";
import {noteList,updateNote,delNote} from "../../apilist/Note";
import uploadFile from "../common/uploadFile.vue";


export default {
  name: 'note',
  components: {uploadFile, goback},
  data(){
    return {
      tab: 0,
      form: {
        title: '',
        type: '',
        page: 1,
        limit: 10,
      },
      tableData: [],
      total: 10,
      dialogFormVisible: false,
      formLabelWidth: '80px',
      note: {
        id: 0,
        title: '',
        note: '',
        fileList: [],
      },
      fileParam: {dir: 'note',fileList:[]}

    }
  },
  methods: {
    handleClick(){

    },
    onSubmit(){this.getList();},
    getList(){
      noteList(this.form).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      })
    },
    handleSizeChange(limit){this.form.limit = limit;this.getList()},
    handleCurrentChange(page){this.form.page = page;this.getList();},
    editNote(row){
      this.note.id = row.id;
      this.note.title = row.title;
      this.note.note = row.note;
      this.fileParam.fileList = row.files;
      this.dialogFormVisible = true;
    },
    delNote(row){
      this.$confirm('此操作将永久删除该备注, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delNote(row).then(res => {
          if(res.state === 'ok'){
            this.$message({
              type: 'success',
              message: '删除成功!',
              onClose:()=>{
                this.getList();
              }
            });
          }
        });
      }).catch(() => {

      });
    },
    changeFileList(files){
      this.note.fileList = files;
    },
     upNote(){
      updateNote(this.note).then(res => {
       if(res.state === 'ok') {
         this.$message({
           message: '修改成功',
           type: 'success',
           onClose: ()=>{
             this.dialogFormVisible = false;
             this.getList();
           }
         });
       }
      })


    }

  },

  mounted() {
    this.getList();
  }
}
</script>

<style scoped>
.block{
  margin-top: 20px;
  width:100%;
  display: flex;
  justify-content: flex-start;

}
</style>
